<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ref } from 'vue'
import type { HandleTable } from '@/types/handle'
import { updateHandle } from '@/api/handle'
const props = defineProps<{
  dMap: Map<string, string>
  editData: HandleTable
  // 刷新
  refresh: () => void
}>()
// 关闭
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()

const formRules = ref<FormRules<HandleTable>>({
  path: [
    {
      required: true,
      message: '请输入接口路径'
    }
  ],
  key: [
    {
      required: true,
      message: '请选择接口权限级别'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入接口名称'
    }
  ],
  method: [
    {
      required: true,
      message: '请选择接口方法'
    }
  ]
})

// 表单dom
const elFormRef = ref<FormInstance>()
function edit() {
  elFormRef.value?.validate((d) => {
    if (d) {
      updateHandle(props.editData)
        .then((d) => {
          ElMessage.success(d.msg)
          props.refresh()
          emit('cDlg')
        })
        .catch((d) => {
          ElMessage.error(d.msg)
        })
    }
  })
}
function cancel() {
  emit('cDlg')
  props.refresh()
}
</script>

<template>
  <el-form ref="elFormRef" :model="editData" :rules="formRules" label-width="150px" width="200px">
    <el-form-item required :label="(dMap.get('name') || 'name') + '：'" prop="name">
      <el-input
        v-model="editData.name"
        :placeholder="'请输入' + dMap.get('name') || 'name'"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item required :label="(dMap.get('key') || 'key') + '：'" prop="key">
          <el-select v-model="editData.key" :placeholder="'请选择' + dMap.get('key') || 'key'">
            <el-option label="sys" value="sys"> </el-option>
            <el-option label="user" value="user"> </el-option>
            <el-option label="public" value="public"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item required :label="(dMap.get('type') || 'type') + '：'" prop="type">
          <el-select v-model="editData.type" :placeholder="'请选择' + dMap.get('type') || 'type'">
            <el-option label="sign" value="sign"> </el-option>
            <el-option label="handle" value="handle"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item required :label="(dMap.get('path') || 'path') + '：'" prop="path">
      <el-input
        v-model="editData.path"
        :placeholder="'请输入' + dMap.get('path') || 'path'"
      ></el-input>
    </el-form-item>
    <el-form-item :label="(dMap.get('status') || 'status') + '：'">
      <el-switch
        v-model="editData.status"
        class="ml-2"
        active-value="1"
        inactive-value="0"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      />
    </el-form-item>
    <el-form-item
      required
      type="textarea"
      :label="(dMap.get('method') || 'method') + '：'"
      prop="method"
    >
      <el-select v-model="editData.method" :placeholder="'请输入' + dMap.get('method') || 'method'">
        <el-option label="POST" value="POST"></el-option>
        <el-option label="GET" value="GET"></el-option>
        <el-option label="PUT" value="PUT"></el-option>
        <el-option label="DELETE" value="DELETE"></el-option>
      </el-select>
    </el-form-item>
    <div class="buttons">
      <el-button type="primary" @click="cancel">取消</el-button>
      <el-button type="success" @click="edit">保存</el-button>
    </div>
  </el-form>
</template>
<style scoped lang="less">
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
